.navbar
  .navbar-inner
    .left.sliding
      a(href="index.html").back.link
        i.icon.icon-back
        span Back
    .center.sliding Grid
    .right
      a(href="#").link.open-panel.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="grid")
    .page-content
      .content-block
        p Framework7 comes with flexible layout grid:
      .ks-grid
        .content-block-title Columns with gutter
        .content-block
          .row
            .col-50 .col-50
            .col-50 .col-50
          .row
            .col-25 .col-25
            .col-25 .col-25
            .col-25 .col-25
            .col-25 .col-25
          .row
            .col-33 .col-33
            .col-33 .col-33
            .col-33 .col-33
          .row
            .col-20 .col-20
            .col-20 .col-20
            .col-20 .col-20
            .col-20 .col-20
            .col-20 .col-20
          .row
            .col-33 .col-33
            .col-66 .col-66
          .row
            .col-25 .col-25
            .col-25 .col-25
            .col-50 .col-50
          .row
            .col-75 .col-75
            .col-25 .col-25
          .row
            .col-80 .col-80
            .col-20 .col-20
        .content-block-title No gutter between columns
        .content-block
          .row.no-gutter
            .col-50 .col-50
            .col-50 .col-50
          .row.no-gutter
            .col-25 .col-25
            .col-25 .col-25
            .col-25 .col-25
            .col-25 .col-25
          .row.no-gutter
            .col-33 .col-33
            .col-33 .col-33
            .col-33 .col-33
          .row.no-gutter
            .col-20 .col-20
            .col-20 .col-20
            .col-20 .col-20
            .col-20 .col-20
            .col-20 .col-20
          .row.no-gutter
            .col-33 .col-33
            .col-66 .col-66
          .row.no-gutter
            .col-25 .col-25
            .col-25 .col-25
            .col-50 .col-50
          .row.no-gutter
            .col-75 .col-75
            .col-25 .col-25
          .row.no-gutter
            .col-80 .col-80
            .col-20 .col-20
        .content-block-title Nested
        .content-block
          .row
            .col-50 .col-50
              .row
                .col-50 .col-50
                .col-50 .col-50
            .col-50 .col-50
              .row
                .col-33 .col-33
                .col-66 .col-66
        .content-block-title Responsive Grid
        .content-block
          p Grid cells have different size on Phone/Tablet
          .row
            .col-100.tablet-50 .col-100.tablet-50
            .col-100.tablet-50 .col-100.tablet-50
          .row
            .col-50.tablet-25 .col-50.tablet-25
            .col-50.tablet-25 .col-50.tablet-25
            .col-50.tablet-25 .col-50.tablet-25
            .col-50.tablet-25 .col-50.tablet-25
          .row
            .col-100.tablet-40 .col-100.tablet-40
            .col-50.tablet-60 .col-50.tablet-60
            .col-50.tablet-66 .col-50.tablet-66
            .col-100.tablet-33 .col-100.tablet-33
          
